<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>政策详情 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="3-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="info" label-width="100px">
                            <el-form-item label="标题">
                                <el-input v-model="info.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="封面">
                                <!-- <el-upload class="image-uploader" action="/lx/admin/api/uploadImage" :show-file-list="false" :on-remove="removeImg" :on-success='successImg' :on-error="errorImg" :on-progress="onProgress" name="file"> -->
                                <el-upload class="image-uploader" :http-request='uploadQnFile' :show-file-list="false" :on-remove="removeImg" :on-success='successImg' :on-error="errorImg" :on-progress="onProgress" name="file">
                                    <img v-if="coverUrl" :src="coverUrl" class="image">
                                    <i v-else class="el-icon-plus image-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="内容">
                                <el-input v-model="info.content" type="textarea" :autosize="{ minRows: 10 }" placeholder="请输入内容"></el-input>
                            </el-form-item>
                            <el-form-item label="附件">
                                <el-upload class="upload-demo" :http-request='uploadQnFile' :on-success='successFile' :on-remove="removeFile" :on-preview="handlePreview" name="file" :file-list="fileList">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="排序">
                                <el-input v-model="info.sort" type="number" placeholder="请输入排序"></el-input>
                            </el-form-item>
                            <el-form-item label="线上/线下">
                                <el-radio-group v-model="info.status">
                                    <el-radio :label="1">正常</el-radio>
                                    <el-radio :label="0">隐藏</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="可见范围">
                                <el-select v-model="info.rangeType" placeholder="请选择可见范围">
                                    <el-option label="所有人" :value="1"></el-option>
                                    <el-option label="签约公司" :value="2"></el-option>
                                    <el-option label="省份、公司" :value="3"></el-option>
                                    <el-option label="二级代理" :value="4"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="info.rangeType == 2 || info.rangeType == 3">
                                <div class="limit-item">
                                    <el-table :data="locationLimit" style="width: 100%; margin-bottom: 10px;">
                                        <el-table-column prop="province" label="省份">
                                        </el-table-column>
                                        <el-table-column prop="city" label="市县">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="delLocationLimit(scope)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-cascader v-model="selectedLocation" :options="city" change-on-select filterable clearable></el-cascader>
                                    <el-button type="text" @click="addLocationLimit"><i class="el-icon-plus"></i>添加</el-button>
                                </div>
                                <div class="limit-item" v-if="info.rangeType == 3">
                                    <el-table :data="companyLimit" style="width: 100%; margin-bottom: 10px;">
                                        <el-table-column prop="name" label="公司">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="delCompanyLimit(scope)">删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- <el-checkbox v-model="limit.companyId.checked">公司</el-checkbox> -->
                                    <el-select v-model="selectedCompanyId" filterable clearable placeholder="请选择公司">
                                        <el-option v-for="(item, index) in companyArray" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                    <el-button type="text" @click="addCompanyLimit"><i class="el-icon-plus"></i>添加</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <#include "/lx/admin/components/qiniu.html" />
    <script src="/lx/activity/assets/json/city.json"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                schoolId: '',
                coverUrl: '',
                fileList: [],
                city: city,
                companyArray: [],
                locationLimit: [],
                selectedLocation: '',
                companyLimit: [],
                selectedCompanyId: ''
            }
        },
        watch: {

        },
        mounted: function() {
            this.info = ${info!'{}'}
            this.schoolId = '${schoolId!}'
            this.companyArray = ${companies!'[]'}

            if (this.info.cover) {
                this.coverUrl = this.info.cover;
            }
            if (this.info.attach) {
                // var filename = this.info.attach.substring(this.info.attach.lastIndexOf('/') + 1, this.info.attach.indexOf('?') > 0 ? this.info.attach.indexOf('?') : this.info.attach.length );
                // var file = {
                //     name: filename,
                //     url: this.info.attach
                // }
                // this.fileList.push(file);
                var attaches = this.info.attach.split(";");
                attaches.pop();
                for (var i = 0; i < attaches.length; i ++) {
                    var filename = attaches[i].substring(attaches[i].lastIndexOf('/') + 1, attaches[i].indexOf('?') > 0 ? attaches[i].indexOf('?') : attaches[i].length );
                    var file = {
                        name: filename,
                        url: attaches[i]
                    }
                    this.fileList.push(file);
                }
            }
            if (this.info.rangeType == 2) {
                this.locationLimit = this.info.locationLimit;
            } else if (this.info.rangeType == 3) {
                this.companyLimit = this.info.companyLimit;
                this.locationLimit = this.info.locationLimit;
            }
        },
        methods: {
            submit() {
                var self = this;
                if (!self.coverUrl) {
                    msg("请上传封面");
                    return;
                }
                if (!self.info.title) {
                    msg("请输入标题");
                    return;
                }
                if (!self.info.content) {
                    msg("请输入内容");
                    return;
                }
                if (self.info.rangeType == 2 && self.locationLimit.length == 0) {
                    msg("请选择可见的省市");
                    return;
                }
                if (self.info.rangeType == 3 && (self.companyLimit.length == 0 || self.locationLimit.length == 0)) {
                    msg("请选择可见的公司和省市");
                    return;
                }

                var locationLimit = '';
                var companyLimit = '';
                if (self.info.rangeType == 2 || self.info.rangeType == 3) {
                    for (var i = 0; i < self.locationLimit.length; i ++) {
                        locationLimit += self.locationLimit[i].province;
                        if (self.locationLimit[i].city) {
                            locationLimit += ',' + self.locationLimit[i].city;
                        }
                        locationLimit += ';';
                    }
                }
                if (self.info.rangeType == 3) {
                    for (var i = 0; i < self.companyLimit.length; i ++) {
                        companyLimit += self.companyLimit[i].id + ';';
                    }
                }

                var file = '';
                if (self.fileList.length > 0) {
                    // file = self.fileList[0].url;
                    for (var i = 0; i < self.fileList.length; i ++) {
                        file += self.fileList[i].url + ";";
                    }
                }

                var url = "/lx/admin/policy/submit"
                var param = {
                    id: self.info.id,
                    schoolId: self.schoolId,
                    cover: self.coverUrl,
                    title: self.info.title,
                    content: self.info.content,
                    attach: file,
                    sort: self.info.sort,
                    status: self.info.status,
                    rangeType: self.info.rangeType
                };
                if (self.info.rangeType == 2) {
                    param.locationLimit = locationLimit;
                }
                if (self.info.rangeType == 3) {
                    param.companyLimit = companyLimit;
                    param.locationLimit = locationLimit;
                }
                var success = () => {
                    if ('${referer!}' != '') {
                        window.location.href = '${referer!}';
                    } else {
                        // window.location.href = "/lx/admin/policy/list";
                        window.location.href = "/lx/admin/school/list";
                    }
                }
                var fail = (response) => {
                    msg(response.data.msg);
                }
                var complete = () => {}
                axiosRequestPro(url, param, success, fail, complete);
            },
            removeImg(file, fileList) {
                this.coverUrl = "";
            },
            successImg(response, file, fileList) {
                // endLoading();
                // this.coverUrl = response.info.url;
                this.coverUrl = response.data.url;
            },
            errorImg(err, file, fileList) {
                // endLoading();
                msg('上传图片失败')
            },
            onProgress() {
                // loading();
            },
            successFile(response, file, fileList) {
                var url = response.data.url;
                url = url.replace("http://", "https://");
                var file = {
                    name: file.name,
                    url: url
                }
                this.fileList.push(file);
            },
            removeFile(file, fileList) {
                // console.log(file, fileList);
                this.fileList = fileList;
                // this.fileList = new Array;
            },
            handlePreview(file) {
                console.log(file);
                var layerOption = {
                    "title": "查看大图", //相册标题
                    "id": 0, //相册id
                    "start": 0, //初始显示的图片序号，默认0
                    "data": [ //相册包含的图片，数组格式
                        {
                            "alt": file.name,
                            "pid": file.uid, //图片id
                            "src": file.url, //原图地址
                            "thumb": "" //缩略图地址
                        }
                    ]
                }
                layer.photos({
                    photos: layerOption,
                    anim: 6
                })
            },
            addLocationLimit() {
                if (!this.selectedLocation || this.selectedLocation.length == 0) {
                    return;
                }
                var loc = {
                    province: this.selectedLocation[0],
                    city: this.selectedLocation[1] ? this.selectedLocation[1] : ''
                }
                this.locationLimit.push(loc);
            },
            delLocationLimit(scope) {
                this.locationLimit.splice(scope.$index, 1);
            },
            addCompanyLimit() {
                for (var i = 0; i < this.companyArray.length; i ++) {
                    if (this.companyArray[i].id == this.selectedCompanyId) {
                        this.companyLimit.push(this.companyArray[i]);
                    }
                }
            },
            delCompanyLimit(scope) {
                this.companyLimit.splice(scope.$index, 1);
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    input[type="file"] {
        display: none !important;
    }

    .image-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .image-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .image {
        width: 178px;
        height: 178px;
        display: block;
    }

    .limit-item {
        margin-bottom: 10px;
    }

    .limit-item:last-child {
        margin-bottom: 0;
    }
    </style>
    <#include "/lx/admin/components/msg.html" />
</body>

</html>